<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Ankang
 * @Date: 2021-06-06 22:37:20
 * @LastEditors: Ankang
 * @LastEditTime: 2021-06-08 20:45:37
 http://www.placehold.it/355x150
-->
<template>
    <div class="cont">
        <SearchButton></SearchButton>
        <!-- <div class="artical" v-for="item in articlelist" @click="divClick(item.article_url)"> -->
        <div class="artical" v-for="item in list" @click="divClick(item.article_id)">
            <div class="item_pic">
                <img :src="'https://images.weserv.nl/?url='+item.article_pic" alt="">
                <div class="item_icon">
                    <img :src="'https://images.weserv.nl/?url='+item.article_avatar" alt="">
                    <span class="item_author">{{item.article_referrals}}</span>
                </div>
                <div class="item_time">
                    <span>{{item.article_format_date}}</span>
                </div>
            </div>
            <div class="item_title">
                <p>{{item.article_title}}</p>
            </div>
            <div class="item_footer">
                <span class="item_tags">{{item.tag_category}}</span>
                <span class="like">
                    <i class="iconfont">&#xe657;</i>
                    {{item.article_love_count}}&emsp;
                    <i class="iconfont">&#xe635;</i>
                    {{item.article_recommend}}
                </span>
            </div>
        </div>
    </div>
</template>



<script>
import axios from 'axios';
import SearchButton from '../../../components/SearchButton'
export default {
    props:['list'],
    components: {
        SearchButton
    },
    data() {
        return {
            // articlelist:[],
            value:""
        }
    },
    methods:{
        divClick(id){
            // window.location.href = url
            this.$router.push('/articledetail')
        }
    },
//     async mounted(){
//         let { limit, offset} = this
//         let result = await axios.get('/zdmapp/good_articles_list',{
//         params: {
//             offset,
//             limit
//         }
//         })
//         this.articlelist = result.data.data
//     },
//     created() {
//         this.offset = 0
//         this.limit = 20
//   },
}
</script>



<style lang="stylus" scoped>
@import '../../../assets/ellipsis.styl'
.cont
    .artical
        background #fff
        margin-top .1rem
        padding .15rem .1rem
        .item_pic
            height 1.6rem
            position relative  
            img
                border-radius .05rem
                width 100%
                height 100%
            .item_icon
                position absolute
                left .05rem
                bottom .07rem
                img
                    height .2rem
                    width .2rem
                    border-radius .2rem
                .item_author
                    margin-left .1rem
                    vertical-align middle
                    font-size 12px
                    color #fff
            .item_time
                font-size 12px
                position absolute
                bottom .07rem
                right .2rem
        .item_title
            margin .15rem 0
        .item_footer
            font-size 10px
            color #949494
            position relative
            .like
                position absolute
                right 0
                bottom 0
                vertical-align bottom
            .item_tags
                ellipsis(200px)
</style>